/*博客块状链接*/
.block-link, .inline-link {
  border: 1px solid rgba(120, 130, 140, 0.13) !important;
  border-radius: 4px;
  cursor: pointer;
  display: block;
  transition: all .2s ease-in-out;
  background-color: #F7F7F7;
  max-width: calc(100vw - 32px);
}

.inline-link-container {
  max-width: 720px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inline-link-container::after {
  content: '';
  flex: 1;
  min-width: 354px;
}

.inline-link {
  flex: 1;
  min-width: 354px;
}

.block-link .left, .inline-link .left {
  flex: 1;
  overflow: hidden;
}

.block-link .link-content,
.inline-link .link-content {
  display: flex;
  padding: 20px 24px;
  gap: 24px;
}

.block-link .center-block,
.inline-link .center-block {
  display: flex;
  gap: 16px;
}

.block-link .link-header,
.inline-link .link-header {
  font-size: 18px;
  color: rgba(0, 0, 0, 0.85);
  -webkit-text-stroke: 0.2px rgba(0, 0, 0, .85);
  margin-bottom: 4px;
}

.block-link .link-desc,
.inline-link .link-desc {
  font-size: 14px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.45);
  text-align: left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-bottom: 12px;
}

.block-link .diagram,
.inline-link .diagram {
  width: 84px !important;
  height: 84px !important;
  object-fit: cover;
  border: none !important;
  border-radius: 2px;
  pointer-events: none;
}

.inline-link .diagram {
  width: 64px !important;
  height: 64px !important;
}

.block-link .link-text,
.inline-link .link-text {
  margin: 0 !important;
  display: inline-flex;
  font-weight: 400;
  font-size: 16px !important;
  color: #166BC7 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid transparent;
}

.block-link .link-text::before,
.inline-link .link-text::before {
  content: '\e770    ';
  font-family: "clifont";
}

.block-link:hover, .inline-link:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  background-color: white;
}

.block-link:hover .link-text,
.inline-link:hover .link-text {
  border-color: #166BC7;
}

.icon-link {
  display: inline-flex;
  align-items: center;
}

/* 图标链接 */
/* content: "\e72b    "; 模版链接 */
/* content: "\e77f    "; 案例链接 */
/* content: "\e780    "; 行业链接 */
/* content: "\e770    "; 链接右 */
/* content: "\e74e    "; 链接左 */

/* 相关案例、相关应用经验、用例模版 */
.case-detail-content .case-item:not(
  .code-case-tpl .case-item,
  .wp-shortcode
)::before {
  content: "\e77f";
  font-family: clifont;
}

/* 应用方案博客 */
.wordpress-article a::before {
  font-family: clifont, serif;
  margin-right: -4px;
}

.wordpress-article a[href*='case/detail']:not(
  .community-wrapper a,
  .wptb-cell a,
  .link-group a,
  ul.nav-tabs a,
  .entry-footer-contact-container a,
  [href^='#'],
  a.wordpressExcel,
  a.wordpressWord,
  a.wordpressPdf,
  .block-link,
  .inline-link,
  .wordpressBtn,
  [href$='70274'],
  [href$='38804'],
  [href*='blogcdnimg'],
  .blocklink a,
  .wp-shortcode
)::before {
  content: "\e77f    " !important;
}

.wordpress-article a[href*='/template/detail']:not(
  .wptb-cell a,
  .link-group a,
  ul.nav-tabs a,
  .entry-footer-contact-container a,
  [href^='#'],
  a.wordpressExcel,
  a.wordpressWord,
  a.wordpressPdf,
  .block-link,
  .inline-link,
  .wordpressBtn,
  [href$='70274'],
  [href$='38804'],
  [href*='blogcdnimg'],
  .blocklink a,
  .wp-shortcode
)::before {
  content: "\e72b    " !important;
}

.wordpress-article a[href*='client/detail']:not(
  .wptb-cell a,
  .link-group a,
  ul.nav-tabs a,
  .entry-footer-contact-container a,
  [href^='#'],
  a.wordpressExcel,
  a.wordpressWord,
  a.wordpressPdf,
  .block-link,
  .inline-link,
  .wordpressBtn,
  [href$='70274'],
  [href$='38804'],
  [href*='blogcdnimg'],
  .blocklink a,
  .wp-shortcode
)::before {
  content: "\e780    " !important;
}

/* 帮助中心 */
.doc-content .entry-content a::before {
  font-family: clifont, serif;
}

.doc-content .entry-content a[href*='case/detail']:not(
  .wptb-cell a,
  .link-group a,
  ul.nav-tabs a,
  .entry-footer-contact-container a,
  [href^='#'],
  a.wordpressExcel,
  a.wordpressWord,
  a.wordpressPdf,
  .block-link,
  .inline-link,
  .wordpressBtn,
  [href$='70274'],
  [href$='38804'],
  [href*='blogcdnimg'],
  .blocklink a,
  .wp-shortcode
)::before {
  content: "\e77f    " !important;
}

.doc-content .entry-content a[href*='/template/detail']:not(
  .wptb-cell a,
  .link-group a,
  ul.nav-tabs a,
  .entry-footer-contact-container a,
  [href^='#'],
  a.wordpressExcel,
  a.wordpressWord,
  a.wordpressPdf,
  .block-link,
  .inline-link,
  .wordpressBtn,
  [href$='70274'],
  [href$='38804'],
  [href*='blogcdnimg'],
  .blocklink a,
  .wp-shortcode
)::before {
  content: "\e72b    " !important;
}

.doc-content .entry-content a[href*='client/detail']:not(
  .wptb-cell a,
  .link-group a,
  ul.nav-tabs a,
  .entry-footer-contact-container a,
  [href^='#'],
  a.wordpressExcel,
  a.wordpressWord,
  a.wordpressPdf,
  .block-link,
  .inline-link,
  .wordpressBtn,
  [href$='70274'],
  [href$='38804'],
  [href*='blogcdnimg'],
  .blocklink a,
  .wp-shortcode
)::before {
  content: "\e780    " !important;
}

.__wikiWrap a::before {
  font-family: clifont, serif;
}

.__wikiWrap a[href*='case/detail']:not(
  .wptb-cell a,
  .link-group a,
  ul.nav-tabs a,
  .entry-footer-contact-container a,
  [href^='#'],
  a.wordpressExcel,
  a.wordpressWord,
  a.wordpressPdf,
  .block-link,
  .inline-link,
  .wordpressBtn,
  [href$='70274'],
  [href$='38804'],
  [href*='blogcdnimg'],
  .blocklink a,
  .wp-shortcode
)::before {
  content: "\e77f    " !important;
}

.__wikiWrap a[href*='/template/detail']:not(
  .wptb-cell a,
  .link-group a,
  ul.nav-tabs a,
  .entry-footer-contact-container a,
  [href^='#'],
  a.wordpressExcel,
  a.wordpressWord,
  a.wordpressPdf,
  .block-link,
  .inline-link,
  .wordpressBtn,
  [href$='70274'],
  [href$='38804'],
  [href*='blogcdnimg'],
  .blocklink a,
  .wp-shortcode
)::before {
  content: "\e72b    " !important;
}

.__wikiWrap a[href*='client/detail']:not(
  .wptb-cell a,
  .link-group a,
  ul.nav-tabs a,
  .entry-footer-contact-container a,
  [href^='#'],
  a.wordpressExcel,
  a.wordpressWord,
  a.wordpressPdf,
  .block-link,
  .inline-link,
  .wordpressBtn,
  [href$='70274'],
  [href$='38804'],
  [href*='blogcdnimg'],
  .blocklink a,
  .wp-shortcode
)::before {
  content: "\e780    " !important;
}



/* 引用样式 */
.blockquote {
  background: #F9F9F9;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(0, 0, 0, 0.65);
  padding: 12px 16px;
  padding-left: 33px;
  position: relative;
  border-left: none;
}

.blockquote::before {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 12px;
  width: 5px;
  border-radius: 5px;
  background: #CBD1D6;
}

/* 视频组件 */
.video {
  padding: 20px 24px;
  border: 1px solid rgba(120, 130, 140, 0.13);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease-in-out;
  min-width: 300px;
}

.video:hover {
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}

.video .poster {
  position: relative;
  width: 160px;
  height: 92px;
  min-width: 160px;
  margin-right: 28px;
  border-radius: 2px;
}

.video .poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.video .info {
  flex: 1;
  background-color: transparent;
}

.video .poster .play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #008C33;
  width: 40px;
  height: 40px;
  color: white;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video .poster .play .clifont {
  font-size: 22px;
}

.video .info .header {
  margin-bottom: 12px;
  font-size: 20px;
  line-height: 27px;
  color: rgba(0, 0, 0, 0.85);
  -webkit-text-stroke: 0.2px rgba(0, 0, 0, 0.85);
}

.video .info .title {

}

.video .info .time {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.65);
  margin-left: 8px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  height: 22px;
  border-radius: 100px;
  background: #F7F7F7;
  border: 1px solid rgba(120, 130, 140, 0.13);
}

.video .info .time .clifont {
  margin-right: 4px;
}

.video .info .desc {
  font-size: 14px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.45);
  overflow: hidden;

  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 450px) {
  .video .info .desc {
    display: none;
  }

  .video .info .header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 0;
  }

  .video .info .time {
    margin: 0;
    margin-top: 8px;
  }

  .video .info .title, .video .info .header {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: initial;
    white-space: initial;
  }
}
